<template>
  <div
    class="message-box animate__animated animate__slideInDown"
    id="message_alert"
  >
    <img
      v-if="!status || status == 'success'"
      class="status-img"
      src="https://image.xuexiwangzhe.com/FqHq4LZ18ux5740UBbE2hYa3ztZe"
    />
    <img
      src="https://image.xuexiwangzhe.com/FhtZ_W4Np8i75RVi3oLm4u04cR-x"
      class="status-img"
      v-else
    />
    <div>{{ msg }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "",
      status: "", // success 成功 error 失败
    };
  },
  mounted() {
    setTimeout(() => {
      let message_alert = document.getElementById("message_alert");
      message_alert.parentNode.removeChild(message_alert);
    }, 3000);
  },
};
</script>

<style lang="less" scoped>
.message-box {
  position: fixed;
  z-index: 9999999999999999;
  top: 93px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 134px;
  padding: 11px;
  box-sizing: border-box;
  background: #ffffff;
  box-shadow: 0px 2px 9px 0px rgba(102, 102, 102, 0.2);
  border-radius: 3px;
  border: 1px solid #e5e5e5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
}

.status-img {
  width: 14px;
  height: 14px;
  margin-right: 9px;
}
</style>
